<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据URL动态获取指定大小图片</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/axios.min.js"></script>
</head>
<body>
    <header>根据URL动态获取指定大小图片</header>
    <main>
        <div class="test-item"><a href="./index.html">返回</a></div>
        <p style="padding-left:10px;">通过参数指定图像的大小以及图片的质量。</p>
        <div class="option-box">
            <div class="option-title">获取指定大小图片</div>
            <div class="option-item">
                <label for="filePath">图片路径</label>
                <input type="text" placeholder="输入图片路径" id="filePath" />
            </div>
            <div class="option-item">
                <label for="widthPix">最大宽度</label>
                <input type="Number" placeholder="最大宽度" id="widthPix" />
            </div>
            <div class="option-item">
                <label for="heightPix">最大高度</label>
                <input type="Number" placeholder="最大高度" id="heightPix" />
            </div>
            <div class="option-item">
                <label for="quality">输出质量</label>
                <input min="0" max="1" value="0.8" step="0.01" type="range" id="quality" /><span id="showOpacity">80%</span>
            </div>
            <div class="option-item">
                <label>保持纵横比</label>
                <input checked id="yes" style="width: 50px;" type="radio" name="aspect" /><label for="yes">保持</label>
                <input id="no" style="width: 50px;" type="radio" name="aspect" /><label for="no">不保持</label>
            </div>
        </div>
        <button id="reset">重置</button>
        <button id="submit">提交</button>
        <div id="responseBox" style="margin: 10px;"></div>
    </main>
    <script>
        document.getElementById('reset').addEventListener('click',()=>{
            document.getElementById('filePath').value = '';
            document.getElementById('widthPix').value = '';
            document.getElementById('heightPix').value = '';
            document.getElementById('yes').checked = true;
            document.getElementById('no').checked = false;
            document.getElementById('quality').value = 0.8;
            document.getElementById('showOpacity').innerText = '80%';
        })
        document.getElementById('quality').addEventListener('input',()=>{
            let quality = document.getElementById('quality').value;
            document.getElementById('showOpacity').innerText = Math.ceil(quality*100)+'%';
        })
        document.getElementById('submit').addEventListener('click',()=>{
            let filePath = document.getElementById('filePath').value;
            let widthPix = document.getElementById('widthPix').value;
            let heightPix = document.getElementById('heightPix').value;
            let aspect = document.getElementById('yes').checked ? true : false;
            let opacity = document.getElementById('quality').value;
            let image = new Image();
            image.src = 'http://localhost:8849/thumbnailator-study/processing/getImage?filePath='+filePath+'&widthPix='+widthPix+'&heightPix='+heightPix+'&aspect='+aspect+'&opacity='+opacity;
            console.log(image.src)
            let imageBox = document.getElementById('responseBox');
            while(imageBox.firstChild){ 
                imageBox.removeChild(imageBox.firstChild)
            }
            imageBox.appendChild(image);
        })
    </script>
</body>
</html>